
<template>
  <div class="img-water-fall">
    <waterfall :ref="'refWaf_'+id" :line-gap="gap" :watch="list" style="position: relative">
      <waterfall-slot move-class="item-move" v-for="(item, index) in list" :width="item.sw ? item.sw : 0" :height="item.sh ? item.sh : 0" :order="index" :key="'pr-waf-g-' + item.id + '_' + index" v-if="item.width>0||item.sw>0">
        <div class="waf-ligan-item" :class="{ active: selectIds.length>0,'act-bodr':item.selected}">
          <div class="no-data" v-if="!item.id||!item.show">{{ item.id }}{{ item.show }}</div>
          <template>
            <a :href="'/imgv/' + item.id" @click.prevent="handleShowInfo(item, index)">
              <img loading="lazy" class="m-img" :srcset="item.srcsets" v-lazy="item.lazy" @error="(e)=>{loadError(e,index)}" @load="(e)=>{onImgLoad(e,item)}"/>
              <template v-if="item.ratios&&item.showOther&&item.id">
                <div v-for="(ot, otx) in item.ratios" :key="'rto-' + otx" :style="'width:' + ot.rw + '%;height:' + (ot.rh<0?Math.abs(ot.rh)+5:ot.angle!=0?ot.rh+5:ot.rh) + '%;left:' +  ot.rleft + '%;top:' +ot.rtop + '%;'+(ot.angle!=0?'transform:rotate('+ot.angle+'deg);transform-origin: top left;':'')" class="outer-box">
                </div>
              </template>
            </a>
            <template v-if="item.showOther&&item.id">
              <div class="hid-el author" v-if="item.article">
              <a class="ar-tit" target="_blank" :href="'/game/' + item.article.id" :title="item.article.title">{{item.article.title }}</a>
            </div>
            <el-popover popper-class="gm-info-pop"
              placement="top-start"
              trigger="hover">
              <i class="sm-tip" slot-content>找相似</i>
              <a target="_blank" slot="reference" @click.stop="toSearchByImg(item)" class="hid-el xs-img-btn"></a>
            </el-popover>

            <div class="global-img-fun-pos">
              <template v-if="!isfolderinfo">
                <el-popover popper-class="gm-info-pop"
                  placement="top-start"
                  trigger="hover">
                  <i class="sm-tip" slot-content>{{item.collect?'取消收藏':'收藏'}}</i>
                  <a slot="reference"
                  class="hid-el fav-btn" :class="{'active':item.collect}"
                  @click.stop="handleShowFav(item.id)"
                ></a>
                </el-popover>
                <el-popover popper-class="gm-info-pop"
                  placement="top-start"
                  trigger="hover">
                  <i class="sm-tip" slot-content>{{item.praise?'取消喜欢':'喜欢'}}</i>
                  <a slot="reference" class="hid-el global-parise-btn" :class="{'active':item.praise}" @click.stop="(e)=>{handlePraise(item,e,index)}">{{item.praise_count}}</a>
                </el-popover>
              </template>
              <el-popover popper-class="gm-info-pop"  v-else
                  placement="top-start"
                  trigger="hover">
                  <i class="sm-tip" slot-content>编辑</i>
                  <a  slot="reference" class="img-edit hid-el" title="编辑" @click.stop="handleEmitEdit(item,index)"></a>
                </el-popover>
            </div>

            <el-popover popper-class="gm-info-pop" v-if="islogin"
              placement="top-start"
              trigger="hover">
              <i class="sm-tip" slot-content>多选</i>
              <a slot="reference" class="hid-el select-btn" :class="{ active: item.selected }" @click="item.selected = !item.selected"></a>
            </el-popover>

            <div class="bot-mask" @click.stop="handleShowInfo(item, index)"></div>
            </template>
          </template>
        </div>
      </waterfall-slot>

      <div class="select-d-fix" :class="{ active: selectIds.length > 0 }" v-if="selectIds.length>0">
        <div class="box">
          <div class="num">
            已选中<i>{{ selectIds.length }}</i
            >个 <i class="cancel-select" @click="handleCancelSelect"></i>
          </div>
          <a class="select-all" @click="handleSelectAll">{{ isCkAll ? '取消全选' : '全选' }}</a>
          <a class="fav-to" @click="showFav = true" v-if="!iscancel">保存到收藏</a>
          <a class="fav-to" @click="handleCancelFav" v-else>取消收藏</a>
          <a class="move-to" @click="handleMoveTo" v-if="ismove">移动到</a>
          <!-- <a class="download-to" @click="handleDownloads">下载选中</a> -->
          <a class="praise-to" @click="handleBatchPraise">保存到喜欢</a>
        </div>
      </div>

      <a-modal v-model="showFav" destroyOnClose centered :footer="null"  :closable="false" width="471px">
        <Fav favmodule="IMG" @close="showFav = false" :foldertype="0" :ismove="ismove" :collectIds="selectCollectIds" :imgids="currentIds" @favsucc="onFavSucc" />
      </a-modal>

      <ImgDetail @close="onInfoClose" :imgurl="currentImgUrl" :imgid="curImgId" :olist="list" :viewidx="curViewidx"  v-if="showInfo"/>
    </waterfall>
  </div>
</template>

<script>
import moment from 'moment'
import JSZip from 'jszip';
// import ImgDetail from './ImgDetail'
import api from '@/api/api'
import Fav from '@/components/Fav'
import SparkMD5 from 'spark-md5'
import Waterfall from '@/components/vue-waterfall/lib/waterfall'
import WaterfallSlot from '@/components/vue-waterfall/lib/waterfall-slot'
export default {
  components: {
    Waterfall,
    WaterfallSlot,
    Fav,
	// ImgDetail
	 ImgDetail: () => import('./ImgDetail')
  },
  props:{
    id:String,
    columns: Number,
    iscancel:Boolean,
    isxscallback:Boolean,
    isfolderinfo:Boolean,
    list:Array,
    ismove:Boolean,
    isuser:Boolean,
    defaultw:Number
  },
  // props:[{
  //   id:{
  //     type:String,
  //     default:''
  //   },
  //   columns: {
  //     type: Number,
  //     default: 5
  //   },
  //   iscancel:{
  //     type:Boolean,
  //     default:false
  //   },
  //   ismove:{
  //     type:Boolean,
  //     default:false
  //   },
  //   isxscallback:{
  //     type:Boolean,
  //     default:false
  //   },
  //   isfolderinfo:{
  //     type:Boolean,
  //     default:false
  //   }
  // }],
  // props:['id','columns','list','iscancel','isxscallback','isfolderinfo'],
  data() {
    return {
      isReflow:true,
      currentIds:[],
      removeEls:[],
      singleMaxWidth:0,
      islogin:false,
      curFullPath:'',
      showInfo:false,
      gap: 0,
      isCkAll: false,
      curViewidx: 0,
      curImgId: '',
      currentImgUrl: '',
      showFav: false,
      
      fullScPraiseParam:{
          isAnimating:false,
          lastTime:0,
          CONFIG:{
          particleCount: {
              mobile: 15,
              tablet: 20, 
              desktop: 25
          },
          cooldown: 1500
          }
      },
    }
  },
  watch: {
    columns() {
      if(this.list.length>0){
        let that=this;
        // that.initLineGap();
      }
    },
    list() {
      if(this.list.length>0){
        this.list.map(item=>{
          if(item.show==undefined){
            item.show=false;
          }
          if(item.showOther==undefined){
            
            item.showOther=false;
          }
        })
        let that=this;
        // that.initLineGap();
      }
    }
  },
  computed: {
    selectIds() {
      let datas = this.list.filter((r) => {
        return r.selected
      })
      let ids = datas.map((item) => {
        return item.id
      })
      this.currentIds=ids;
      this.isCkAll = ids.length == this.list.length
      return ids
    },
    selectCollectIds() {
      let datas = this.list.filter((r) => {
        return r.selected
      })
      let ids = datas.map((item) => {
        return item.collectId;
      })
      return ids
    },
  },
  destroyed() {
    window.removeEventListener('resize',this.initLineGap)
  },
  methods: {
    onImgLoad(e,item){
      item.show=true;
      item.showOther=true;
    },
    async handleBatchPraise(e){
      let res=await api.batchAddPraise({type:4,praiseIds:this.currentIds.join(',')});
      let that=this;
      if(res.code==0){
        this.list.map((item) => {
          if(that.currentIds.includes(item.id)){
            item.selected=false;
            item.parse=true;
            item.praise_count+=1;
          }
        })
        this.createHearts(e.target);
        this.$bhelper.addCirRecord('FAV');
        this.$bhelper.addCirRecord('FAV-IMG');
        this.$store.dispatch('setLeftMenu',[])
        this.$amessage.success('已喜欢，品味不错哦～')
      }
    },
    onFavSucc() {
      let that=this;
      this.list.map((item) => {
        if(that.currentIds.includes(item.id)){
          item.collect=true;
          item.selected=false;
        }
      })
      this.currentIds=[];
      this.showFav = false
    },
    getRandomNumber(min, max) {
        return Math.random() * (max - min) + min;
    },
    getParticleCount() {
        const width = window.innerWidth;
        if (width <= 480) return this.fullScPraiseParam.CONFIG.particleCount.mobile;
        if (width <= 768) return this.fullScPraiseParam.CONFIG.particleCount.tablet;
        return this.fullScPraiseParam.CONFIG.particleCount.desktop;
    },
    createHearts(e) {
        const confettiContainer = document.createElement('div');
        confettiContainer.className = 'confetti-container';

        let _parent=document.querySelector('.comp-article-page');
        if(location.href.indexOf('/imgv/')>-1){
          _parent=document.querySelector('.im-wrap-container');
        }else if(location.href.indexOf('/user/')>-1){
          _parent=document.querySelector('.uhome');
        }else if(this.$route.name=='Home'||this.$route.name=='games'||this.$route.name=='screenshots'||this.$route.name=='searchs'||this.$route.name=='searchByImageList'){
          _parent=document.body;
        }
        _parent.appendChild(confettiContainer);

        const now = Date.now();
        if (this.fullScPraiseParam.isAnimating || now - this.fullScPraiseParam.lastTime < this.fullScPraiseParam.CONFIG.cooldown) return;
        
        this.fullScPraiseParam.isAnimating = true;
        this.fullScPraiseParam.lastTime = now;

        // showToast();

        // const btn =e.target;
        let that=this;
        // btn.style.animation = 'btn-success 0.5s ease';
        // setTimeout(() => btn.style.animation = '', 500);

        const particleCount = this.getParticleCount();
        const viewportWidth = window.innerWidth;
        const spacing = viewportWidth / particleCount;

        const fragment = document.createDocumentFragment();
        let activeParticles = particleCount;

        for(let i = 0; i < particleCount; i++) {
            const heart = document.createElement('div');
            heart.className = 'heart';
            heart.textContent = '❤';
            
            const xPos = i * spacing + this.getRandomNumber(-20, 20);
            heart.style.left = `${xPos}px`;
            
            const duration = this.getRandomNumber(2, 3);
            heart.style.animationDuration = `${duration}s`;

            heart.addEventListener('animationend', () => {
                heart.remove();
                if (--activeParticles === 0) {
                    that.fullScPraiseParam.isAnimating = false;
                }
            }, { once: true });

            fragment.appendChild(heart);
        }

        confettiContainer.appendChild(fragment);
    },
    loadError(e,idx){
      debugger
      this.list.splice(idx,1);
        // e.target.removeAttribute('srcset');
    },
    handleShowFav(id){
      let ckPass=this.$bhelper.checkLogin(this);
      if(!ckPass)return;
      this.currentIds=[id];
      this.showFav=true;
    },
    onLoaded(e,item){
      let domainUrl=this.$imgdomainurl;
      let el=e.target;
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      let srcsets=[];
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@1x560.webp 1x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@2x560.webp 2x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@3x560.webp 3x');
      el.srcset=srcsets.join(',')
    },
    getimgObj(item){
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      return{
        src:this.$imgdomainurl+item.id+'-'+_vtime+'@1x560.webp',
        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      }
    },
    getImgParams(item){
      let prams={
        id:item.id,
        w:parseInt(this.gap)*2,
        uptime:'',
        isimg:true
      };
      if(item.updateTime){
        prams.uptime=item.updateTime;
      }else if(item.createTime){
        prams.uptime=item.createTime;
      }else if(item.create_time){
        prams.uptime=item.create_time.replace('T',' ');
      }
      return prams;
    },
    handleMoveTo(){
      this.showFav=true;
    },
    handleEmitEdit(item,index){
      this.$emit('ineditimg',item,index);
    },
    async handleCancelFav(){
      let res=await api.batchCancelFavSinglePic(this.selectCollectIds);
      if(res.code==0){
        this.$amessage.success('已取消收藏');
        this.$emit('cancelfav',this.selectCollectIds)
      }
    },
    createPlusOne(likeContainer) {
      const plus = document.createElement('div');
      plus.className = 'plus-one';
      plus.innerHTML = '<span style="color: #ffffff;">+</span><span style="color: #ffffff;">1</span>';
      plus.style.left = '50%';
      plus.style.top = '50%';
      plus.style.animation = 'floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

      likeContainer.appendChild(plus);
      setTimeout(() => plus.remove(), 1000);
    },
    async handlePraise(item,e,idx){
      let ckPass=this.$bhelper.checkLogin(this);
      if(!ckPass)return;
      if(item.praise){
        let res=await api.delPraise({type:4,praiseId:item.id});
        if(res.code==0){
          this.$amessage.success('取消喜欢~');
          item.praise_count-=1;
          item.praise=false;
          if(this.isuser){
            this.list.splice(idx,1);
          }
        }
      }else{
        let res=await api.addPraise({type:4,praiseId:item.id});
        if(res.code==0){
          this.createHearts(e.target);
          this.createPlusOne(e.target);
          this.$bhelper.addCirRecord('FAV');
          this.$bhelper.addCirRecord('FAV-IMG');
          this.$store.dispatch('setLeftMenu',[])
          this.$amessage.success('已喜欢，品味不错哦～')
          item.praise_count+=1;
          item.praise=true;
        }
      }
    },
    toSearchByImg(item){
      let that = this;
      //方法二
      let canvas = document.createElement('canvas');
      let img = document.createElement('img');
      // 解决跨域 Canvas 污染问题

      img.setAttribute("crossOrigin", '*');

      // that.isSearching = true;

      // that.isFocus = false;
      img.onload = function (e) {
        canvas.width = img.width;
        canvas.height = img.height;
        let context = canvas.getContext('2d');
        //绘制图片
        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

        const base64 = canvas.toDataURL('image/jpeg')
        localStorage.setItem('tmp_im_b64', base64);
        that.isFocus = false;
        if (that.$route.name == 'searchByImageList') {
          location.href='/searchByImageList?t='+Date.parse(new Date())+'&similar='+item.id
        } else {
          let routeData=that.$router.resolve({  path: '/searchByImageList?t='+Date.parse(new Date())+'&similar='+item.id})
          window.open(routeData.href, '_blank');
        }
        return;
      }
      //将资源链接赋值过去，才能触发img.onload事件
      img.src = this.$imgdomainurl+item.id+'@1x560.webp';
    },
    onInfoClose(){
        window.history.pushState({}, 0,this.curFullPath);
        document.body.style.overflow='inherit';
        this.showInfo=false;
    },
    handleCancelSelect() {
      this.list.map((item) => {
        item.selected = false
      })
      this.isCkAll = false
    },
    handleDownloads() {
      let that = this
      let datas = this.list.filter((r) => {
        return that.selectIds.includes(r.id)
      })
      this.zip(datas)
    },
    zip(arr) {
      this.$amessage.info('下载中,请稍候...')
      var zip = new JSZip()
      let folerName = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      // 创建images文件夹
      var imgFolder = zip.folder(folerName)
      let flag = 0 //  判断加载了几张图片的标识
      let that=this;
      for (let i = 0; i < arr.length; i++) {
        arr[i].thumbnail=that.$imgdomainurl+arr[i].id+'.webp';
        //遍历数组arr
        this.getBase64(arr[i].thumbnail).then((base64) => {
          //调用getBase64()方法,传入图片网络地址得到base64数据
          base64 = base64.split('base64,')[1]
          imgFolder.file(arr[i].thumbnail.substring(arr[i].thumbnail.lastIndexOf('/') + 1) + '.webp', base64, { base64: true }) //自定义图片名字，存进images文件夹里面
          if (flag === arr.length - 1) {
            zip.generateAsync({ type: 'blob' }).then((blob) => {
              saveAs(blob, folerName + '.zip') //自定义文件压缩包名字
              that.$amessage.success('下载完成')
            })
          }
          flag++
        })
      }
    },
    //传入图片地址，返回base64格式数据
    getBase64(img) {
      var image = new Image()
      image.crossOrigin = '*' //解决图片跨域问题
      image.src = img
      return new Promise((resolve, reject) => {
        image.onload = () => {
          resolve(this.getBase64Image(image))
        }
      })
    }, //创建画布，将图片渲染到画布上，再将画布转为base64格式数据返回出来
    getBase64Image(img, width, height) {
      var canvas = document.createElement('canvas')
      canvas.width = width ? width : img.width
      canvas.height = height ? height : img.height
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      var dataURL = canvas.toDataURL()
      return dataURL
    },
    handleSelectAll() {
      let that = this
      if (that.selectIds.length != that.list.length) {
        this.list.map((item) => {
          item.selected = true
        })
      } else {
        this.list.map((item) => {
          item.selected = !that.isCkAll
        })
      }
    },
    handleShowInfo(_item, _idx) {
      if (this.selectIds.length > 0) {
        _item.selected = !_item.selected
        return;
      }
      if(this.isxscallback){
        this.$emit('choose',_item,_idx);
        return;
      }
      this.curViewidx = _idx
      this.curImgId = _item.thumbnailBean.id
      this.currentImgUrl = _item.src
      window.history.pushState({}, 0, '/imgv/' + _item.id)
      document.body.style.overflow = 'hidden'
      this.showInfo = true
    },
    onImgError(e) {
      e.target.src = require('../assets/pro/default_uimg.svg')
    },
    get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
      if (!member.id || !member.avatar) return this.defaultAvatar
      let hash = SparkMD5.hash(member.avatar).slice(0, 6)
      return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
    },
    get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
      return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
    },
    initLineGap(){
      // _gap = _gap < 273 ? document.getElementsByClassName('vue-waterfall')[0].offsetWidth / 4 : _gap;
      let that=this;
      if(this.isReflow==false)return;
      this.isReflow=false;
      that.$nextTick(()=>{
        setTimeout(()=>{
          let el=document.getElementsByClassName('vue-waterfall')[0];
          if(that.$refs['refWaf_1'])
            el=document.getElementsByClassName('vue-waterfall')[0];
          if(that.$refs['refWaf_2'])
          {
            el=document.getElementsByClassName('vue-waterfall')[1];
            if(!el){
              el=document.getElementsByClassName('vue-waterfall')[0];
            }
          }
          if(el)
          {
            let _width= el.offsetWidth;
            _width=window.screen.width;
            // _width= window.screen.width-38-20;
            // console.log(_width)
            let _col=that.columns;
            let _gap = 0;

            let isimgpage=this.$route.name=='screenshots'||this.$route.name=='games';
            
            if(isimgpage){
              if(_width>1920){
                _width=_width-38-20-20-330-80;
                _gap = _width / 6;
              }
              else if(_width<=1920&&_width>1900){
                _width=_width-38-20-20-330-60;
                _gap = _width / 5;
              }else{
                // _width=_width-38-20-20-330-60;
                _col=4;
                _gap = _width / _col;
              }
            }
            else{
              let isimgv=that.$route.name=='imgv'||location.href.indexOf('imgv')>-1;
              if(isimgv){
                _width=$('.im-wrap-container').width();
                if(_width>1920){
                  _width= _width-38-20-100;
                  _gap = _width / 6;
                }
                else if(_width<1920||_width>1900){
                  _width= _width-38-20-80;
                  _gap = _width / 5;
                }else{
                  // _width= _width-38-20-60;
                  _col=4;
                  _gap = _width / _col;
                }
              }else{
                let issearchImgs=that.$route.name=='searchByImageList';
                if(issearchImgs){
                  if(_width>1920){
                    _width=_width-38-20-$('.search-by-image-result-page .layout-right').width()-36-100;
                    _gap = _width / 6;
                  }
                  else if(_width<1920||_width>1900){
                    _width=_width-38-20-$('.search-by-image-result-page .layout-right').width()-36-80;
                    _gap = _width / 5;
                  }else{
                    // _width=_width-38-20-$('.search-by-image-result-page .layout-right').width()-36-60;
                    _col=4;
                    _gap = _width / _col;
                  }
                }else{
                  if(_width>1920){
                    _width= _width-38-20-100;
                    _gap = _width / 7;
                  }
                  else if(_width<1920||_width>1900){
                    _width= _width-38-20-80;
                    _gap = _width / 6;
                  }else{
                    // _width= _width-38-20-60;
                    _col=4;
                    _gap = _width / _col;
                  }
                }
              }
            }
            that.gap = _gap;
            setTimeout(()=>{
              if(that.$refs['refWaf_1'])
              {
                that.$refs['refWaf_1'].reflowHandler();
              }
              if(that.$refs['refWaf_2'])
              {
                that.$refs['refWaf_2'].reflowHandler();
              }
              that.isReflow=true;
            },200)
          }
        },300)
      })
    },
    seeBox(){
      // 回调函数，在目标元素进入视口时触发  
      let that=this;
      function handleIntersect(entries, observer) {  
        
        entries.forEach(entry => {  
          // 获取图片容器的真实图片URL  
          if(!entry.isIntersecting)
        {
          that.removeEls.push(entry.target)
          //entry.target.remove();
        }
        });  
      }  
        
      // 创建一个Intersection Observer实例  
      const options = {  
        root:null, // 使用视口作为根  
        rootMargin: '50px 0px', // 可以在视口外50px处就开始加载  
        threshold: 0.1 // 当目标元素的可见性达到视口的10%时触发回调  
      };  
        
      const observer = new IntersectionObserver(handleIntersect, options);  
        
      // 获取所有需要懒加载的图片容器  
      const lazyImageContainers = document.querySelectorAll('.vue-waterfall-slot');  
        
      // 为每个图片容器添加观察  
      lazyImageContainers.forEach(container => {  
        observer.observe(container);  
      });
    }
  },
  mounted() {
    // let isimgpage=this.$route.name=='screenshots'||this.$route.name=='games'||this.$route.name=='searchByImageList';
    // let _width=document.body.clientWidth;    
    // let _gap=this.defaultw;

    // let _col=this.columns;
    // if(isimgpage){
    //   if(_width>1920){
    //     _gap = _width / 5;
    //   }
    //   else if(_width<=1920&&_width>1900){
    //     _gap = _width / 4;
    //   }else{
    //     _col=4;
    //     _gap = _width / _col;
    //   }
    // }
    // else{
    //   if(_width>1920){
    //     _gap = _width / 6;
    //   }
    //   else if(_width<1920||_width>1900){
    //     _gap = _width / 5;
    //   }else{
    //     _col=4;
    //     _gap = _width / _col;
    //   }
    // }
    // this.gap=_gap;
    this.initLineGap();

    this.islogin=!!localStorage.getItem('token');
    this.curFullPath=location.pathname;
    let that=this;
    
    window.addEventListener('resize',this.initLineGap)
    // this.$nextTick(()=>{
    //   // that.singleMaxWidth=that.$refs.refWaf_1.$el.clientWidth;
    //   setTimeout(()=>{
    //     that.initLineGap();
    //     that.seeBox();
    //   },1000)
    // })
  }
}
</script>

<style scoped lang="less">
.waf-ligan-item {
  position: absolute;
  top:0px;
  left:20px;
  // right:0px;
  // bottom:0px;
  right: 0px;
  bottom: 20px;
  // font-size: 1.2em;
  border: 2px solid transparent;
  border-radius: 16px;
  transition: 0.1s all linear;
  animation:opacity .2s linear;
  overflow: hidden;
  .no-data{
    background:#1D1D1F;
    height:100%;
    width:100%;
    visibility:hidden;
    position: relative;
    overflow: hidden;
    display:block;
    visibility:visible;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
        animation: shimmer 1.5s infinite;
    }
  }
  &:hover {
    cursor: pointer;
    border-color:#11CCB1;
    .hid-btn {
      display: inherit;
    }
  }
  .m-img {
    // border-radius: 16px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: middle;
  }
  .author {
    position: absolute;
    bottom: 11px;
    left: 10px;
    // background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    // padding: 10px 13px;
    width: 164px;
    cursor: default;
    .ar-tit {
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      line-height: 20px;
      // margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: url('../assets/pro/take_tit_wht_icon.svg') no-repeat;
      background-position: left center;
      padding-left: 22px;
      display: inline-block;
      width: 100%;
    }
    .u-box {
      display: flex;
      padding-left: 20px;
      .name {
        font-size: 14px;
        color: #969696;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .avatar {
        width: 20px;
        height: 20px;
        border-radius: 20px;
        margin-right: 7px;
      }
    }
  }
  .xs-img-btn {
    background-image: url('../assets/pro/xs_img_cion.svg');
    background-repeat: no-repeat;
    background-position: center center;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 10px;
    bottom: 11px;
    background-color: #fff;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0.9;
    &:hover {
      opacity: 1;
    }
  }
  .hid-btn {
    display: none;
  }
  .hid-el {
    // display: none;
    transition: 0.1s all linear;
    opacity: 0;
  }
  .bot-mask {
    background: linear-gradient(transparent, #000);
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    z-index: -1;
    opacity:0;
    transition: all 0.2s linear;
  }
  &:hover {
    border: 2px solid #11CCB1;
    .bot-mask {
      z-index: 1;
      opacity:1;
    }
    .hid-el {
      opacity: 1;
      z-index: 2;
    }
  }
  &.active {
    .select-btn {
      opacity: 1;
    }
  }
  &.act-bodr{
    border: 2px solid #11CCB1;
  }
}
.item-move {
  transition: all .5s cubic-bezier(.55,0,.1,1);
  -webkit-transition: all .5s cubic-bezier(.55,0,.1,1);
}
</style>